<template>
	<view class="d-flex aling-centen Checkbox" @tap.stop='cheboxEvent'>
		<view :class="status"></view>
		<text class="ml-10">
			 <slot></slot>
		</text>
	</view>
</template>

<script>
	export default {
		name:'x-checkbox',
		props:{
			value:{
				type:[Boolean,Number],
				default:false
			},
			name:{
				type:[String,Number],
				default:''
			}
		},
		
		data(){
			return {
				status:this.value?'actve':'cheder'
			}
		},
		watch:{
			value(event){
				if(event){
					this.status='actve'
				}else{
					this.status='cheder'
				}
			}
		},
		methods:{
			cheboxEvent(){
				this.$emit('change',{type:this.value,name:this.name})
			}
		}
	}
</script>

<style lang="scss">
	.Checkbox{
		view{
			width: 38rpx;
			height: 38rpx;
		}
		.cheder{
			background: url(../../static/icon/cheder.png) no-repeat;
			background-size: 100% 100%;
		}
		.actve{
			background: url(../../static/icon/chebox.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
